<template>
    <header>
        <h2>在线商城后台管理系统</h2>
        <img  :src="'http://localhost:9191'+mmmm.avatarUrl" alt="" class="avatar" />

        <el-menu
        mode=""
        :collapse=false
        active-text-color="orange"
        default-active="2"
        text-color="white"
        background-color="rgb(42,42,51)"
        class="down"
        >
        <el-sub-menu index="1">
              <template #title>
                {{mmmm.role}}</template>
            <el-menu-item index="1-1">修改密码</el-menu-item>
            <el-menu-item index="1-2" @click="exit()">退出登录</el-menu-item>
        </el-sub-menu>


        </el-menu>
    </header>
</template>

<script setup>
import router from "@/router";
import { onMounted, ref } from "vue";
import {ElMessage,ElMessageBox} from 'element-plus'

// 弹窗事件
const exit=()=>{
   ElMessageBox.confirm(
    '是否确认退出登录？',
    '提示',
    {
        confirmButtonText:'是',
        cancelButtonText:'否',
        type:'warning',
    }
   ).then(()=>{
    localStorage.clear(),
    ElMessage({
        type:'success',
        message:'成功退出登录',
    });
    // 延迟跳转确保存储清除完成
    setTimeout(()=>{
        router.push('/admin')
    },500)
   }).catch(()=>{
    ElMessage({
        type:'info',
        message:'取消退出登录'
    })
   })
}

const mmmm=ref({});
const loadAvatar=()=>{
    const storedAvatar=localStorage.getItem('user');
    if(storedAvatar){
        mmmm.value=JSON.parse(storedAvatar);
    }
}
onMounted(()=>{
    loadAvatar();
})


</script>

<style scoped>
header{
    width: 100%;
    height: 15vh;
    background-color: #2a2a33;
    color: white;
    display: flex;
}
header h2{
    height: 15vh;
    font-size: 40px;
    font-weight: 800;
    line-height: 15vh;
    color: orange;
}
header .down{
    width: 130px;
    height: 55px;
    line-height: 50px;
    position: absolute;
    left: 85%;
    top: 3%;
    border: 0;
}
img{
    width: 75px;
    height: 75px;
    border-radius: 50%;
    position: absolute;
    left: 76%;
    top: 1%;
}
</style>